<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	// 数据轮播图
	const ArrImg = [
		'https://img0.baidu.com/it/u=2136891175,1458697858&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700672400&t=b2d7f8c36265d6c7134f9d424ea7f070',
		'https://img1.baidu.com/it/u=4049022245,514596079&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700672400&t=cf47cc040a93cb0a062ddc626b48d080',
		'https://img0.baidu.com/it/u=2020518972,2077284106&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1700672400&t=3cea1643c889d121bca4f5c3bd98b995'
	]
	// 宫格数据 
	const DridArr = ref([{
			id: 1,
			name: '买房',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/1.png',
			path: '/subpkg/buyhouse/buyhouse'

		},
		{
			id: 2,
			name: '租房',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/2.png',
			path: '/subpkg/renthouse/renthouse'

		},
		{
			id: 3,
			name: '求租',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/3.png',
			path: '/subpkg/rent/rent'

		},
		{
			id: 4,
			name: '求购',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/4.png',
			path: '/subpkg/purchase/purchase'

		},
		{
			id: 5,
			name: '地图找房',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/5.png',
			path: '/subpkg/map/map'

		},
		{
			id: 6,
			name: '资讯',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/6.png',
			path: '/subpkg/consult/consult'
		},
		{
			id: 7,
			name: '楼房圈',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/7.png',
			path: '/subpkg/property/property'

		},
		{
			id: 8,
			name: '经纪人',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/8.png',
			path: '/subpkg/broker/broker'

		},
		{
			id: 9,
			name: '团购看房',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/9.png',
			path: '/subpkg/group/group'

		},
		{
			id: 10,
			name: '直播看房',
			img: 'http://10.31.71.52:7002/public/static/Homeimg/10.png',
			path: '/subpkg/liveviewing/liveviewing'

		}
	])
	// 咨询数据
	const linsArr = ref([])
	// 新房房屋数据
	const housingDdata = ref([])
	// 二手房数据
	const secondData = ref([])
	// 经纪人数据
	const brokerData = ref([])

	// 新房 /housing
	const housing = () => {
		uni.request({
			method: 'GET',
			url: 'http://10.31.71.52:7002/housing',
			data: {
				currentPage: '7',
				pageSize: '5'
			},
			success: (res) => {
				res.data.data.forEach(t => {
					housingDdata.value.push({
						id: t.id,
						name: t.name,
						price: t.price,
						resident: t.resident,
						extent: t.extent,
						house_type: t.house_type,
						ll: t.ll,
						img: t.img,
					})
				});
			}
		})
	}
	// 二手房 /second/housing
	const second = () => {
		uni.request({
			method: 'GET',
			url: 'http://10.31.71.52:7002/second/housing',
			data: {
				currentPage: '1',
				pageSize: '5'
			},
			success: (res) => {
				res.data.data.forEach(t => {
					secondData.value.push({
						id: t.id,
						name: t.name,
						price: t.price,
						resident: t.resident,
						extent: t.extent,
						house_type: t.house_type,
						ll: t.ll,
						img: t.img,
					})
				});
			}
		})
	}
	// 资讯 /api/v1/infos
	const infos = () => {
		uni.request({
			method: 'GET',
			url: 'http://10.31.71.52:7002/api/v1/infos',
			data: {
				currentPage: '1',
				pageSize: '4'
			},
			success: (res) => {
				res.data.data.forEach((t, k) => {
					linsArr.value.push({
						id: t.id,
						title: t.title + ',大家快来抢购！' + t.title + '快来抢购！',
						tap: 'TOP' + (k + 1),
					})
				});
			}
		})
	}
	// 经纪人 /api/v1/broker
	const brokerD = ref([]);
	const broker = () => {
		uni.request({
			method: 'GET',
			url: 'http://10.31.71.52:7002/api/v1/broker',
			data: {
				currentPage: '1',
				pageSize: '4'
			},
			success: (res) => {
				brokerD.value = res.data.data
				res.data.data.forEach((t, k) => {
					brokerData.value.push({
						id: t.id,
						name: t.name,
						company: t.company,
						img: `http://10.31.71.52:7002/public/static/Homeimg/1${k + 2}.png`
					})
				});
			}
		})
	}
	// 生命周期 调用 数据 接口
	onMounted(() => {
		housing();
		infos();
		second();
		broker();
	})
	// 宫格
	const change = (e) => {
		const value = DridArr.value.find(t => t.id == e.detail.index)
		uni.navigateTo({
			url: value.path,
		});
	}
	// 咨询
	const click = (id) => {
		uni.navigateTo({
			url: '/subpkg/consult_Details/consult_Details?id=' + id,
		})
	}
	// <!-- 更多 -->
	const more = (type) => {
		// 咨询频道
		if (type == 'consult') {
			uni.navigateTo({
				url: '/subpkg/consult/consult',
			})
		} else if (type == 'Buyhouse') {
			// 更多楼盘
			uni.navigateTo({
				url: '/subpkg/buyhouse/buyhouse',
			})
		} else if (type == 'broker') {
			// 经纪人
			uni.navigateTo({
				url: '/subpkg/broker/broker',
			})
		}
	}
	// 详情
	const details = (id, type) => {
		if (type == 'New') {
			uni.navigateTo({
				url: '/subpkg/NewDetail/NewDetail?id=' + id,
			})
		} else {
			uni.navigateTo({
				url: '/subpkg/detail/detail?id=' + id,
			})
		}
		console.log(id);
	}
	// 经纪人
	const onClick = (id) => {
		const value = brokerD.value.find(t => t.id == id)
		console.log(value);
		uni.navigateTo({
			url: '/subpkg/broker_Details/broker_Details?item=' + JSON.stringify(value),
		})
	}
	// 搜索
	const search = () => {
		uni.navigateTo({
			url: '/subpkg/search/search',
		})
	}
	// 切换地址
	const show = ref(false)
	const select = ref('北京');
	const open = () => {
		show.value = !show.value;
	}
	// 下拉菜单数据
	const range = reactive([{
			value: 0,
			text: "全部"
		},
		{
			value: 1,
			text: "北京"
		},
		{
			value: 2,
			text: "上海"
		},
		{
			value: 3,
			text: "天津"
		},
		{
			value: 4,
			text: "重庆"
		},
	]);
	// 下拉框触发的change事件
	const valueClick = (text) => {
		select.value = text;
		show.value = !show.value;
	};
</script>

<template>
	<div class="HomeBox">
		<div class="header">
			<div class="dw">
				<div class="one">
					<div style="font-size: 18px;">宏烨找房</div>
					<div class="srech"><text @click='open'>{{ select }} ▼</text>
						&nbsp;|
						<div style="width: 77%; text-align: center;" @click="search">请在这里输入区域/商圈</div>
						<uni-icons type="search" size="18" color="#fff" @click="search"></uni-icons>
					</div>
				</div>
			</div>
		</div>
		<div class="tan" v-show="show">
			<div v-for="(item, index) in range" :key="index" @click="valueClick(item.text)">{{item.text}}</div>
		</div>
		<div class="main">
			<!-- 轮播图 -->
			<div class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots=true :autoplay=true interval=3000 :duration=500>
					<swiper-item v-for="(item, index) in ArrImg" :key="index">
						<div class="swiper-item">
							<image :src="item" mode="heightFix"></image>
						</div>
					</swiper-item>
				</swiper>
			</div>
			<div style="padding: 0 20px">
				<!-- 宫格 -->
				<div class="grid">
					<uni-grid :column="5" :show-border="false" :highlight="false" @change="change">
						<uni-grid-item v-for="(item, index) in DridArr" :index="item.id" :key="item.id">
							<div class="grid-item-box" style="background-color: #fff;">
								<image style="width: 45px;" :src="item.img" mode="widthFix" />
								<text class="text">{{ item.name }}</text>
							</div>
						</uni-grid-item>
					</uni-grid>
				</div>
				<!-- 资讯 -->
				<div class="title">楼市资讯 <text class="gd" @click="more('consult')">更多</text></div>
				<div class="list">
					<div class="item" v-for="(item, index) in linsArr" :key="item.id" @click="click(item.id)">
						<div class="tap">{{ item.tap }}</div>
						<div class="wen">{{ item.title }}</div>
					</div>
					<div class="qgtu"></div>
				</div>
				<!-- 楼盘 -->
				<div class="title">热门楼盘 <text class="gd" @click="more('Buyhouse')">更多</text></div>
				<div>
					<div class="dl" @click="details(item.id, 'New')" v-for="(item, index) in housingDdata" :key="index">
						<div class="dt">
							<image style="width: 40vw;" :src="item.img" mode="widthFix" />
						</div>
						<div class="dd">
							<div class="dd-title">
								{{ item.name }}
							</div>
							<div class="dd-introduce">
								{{ item.ll }}平/{{ item.house_type }} 1厅 / {{ item.resident }}
							</div>
							<div class="dd-price">
								{{ item.price }}万 <text
									style="font-size: 10px; color: #000;">{{ item.extent }}元/m²</text>
							</div>
							<div class="dd-div">
								小区
							</div>
						</div>
					</div>
				</div>
				<!-- 经纪人 -->
				<div class="title">经纪人 <text class="gd" @click="more('broker')">更多</text></div>
				<div class="jjr">
					<div v-for="(item, index) in brokerData" :key="item.id">
						<div @click="onClick(item.id)" class="item">
							<image :src="item.img" style="width: 70%;border-radius: 50%;" mode="widthFix" />
							<div>
								<div>{{ item.name }}</div>
								<div>{{ item.company }}</div>
							</div>
							<div class="zx">
								<uni-icons style="color: #fff;" type="chat-filled" size="20"></uni-icons>
								咨询
							</div>
						</div>
					</div>
				</div>
				<div style="width: 95.5%;height: 60px;overflow: hidden;margin: auto;">
					<image src="http://10.31.71.52:7002/public/static/Homeimg/16.png" mode="widthFix"
						style="border-radius: 10px;" />
				</div>
				<!-- 二手放 -->
				<div class="title">二手房 <text class="gd" @click="more('consult')">更多</text></div>
				<div>
					<div class="dl" @click="details(item.id, 'Old')" v-for="(item, index) in secondData" :key="index">
						<div class="dt">
							<image style="width: 40vw;" :src="item.img" mode="widthFix" />
						</div>
						<div class="dd">
							<div class="dd-title">
								{{ item.name }}
							</div>
							<div class="dd-introduce">
								{{ item.ll }}平/{{ item.house_type }} 1厅 / {{ item.resident }}
							</div>
							<div class="dd-price">
								{{ item.price }}万 <text
									style="font-size: 10px; color: #000;">{{ item.extent }}元/m²</text>
							</div>
							<div class="dd-div">
								小区
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.HomeBox {
		width: 100vw;
		height: 99vh;
		background: #fff;
		position: relative;

		.tan {
			width: 50px;
			text-align: center;
			box-sizing: border-box;
			line-height: 25px;
			padding: 5px;
			border-radius: 5px;
			background: #fff;
			position: absolute;
			top: 95px;
			left: 20px;
			z-index: 99;
		}

		.header {
			width: 100%;
			height: 16vh;
			background: rgb(21, 132, 245);
			padding: 0 4vw;
			box-sizing: border-box;
			color: #fff;
			font-size: 14px;

			.one {
				position: relative;
				bottom: -35px;
				left: 0;
			}

			.srech {
				margin: 1vh 0;
				width: 92%;
				height: 4.5vh;
				line-height: 4.5vh;
				// border: 1px solid #ccc;
				border-radius: 10px;
				padding: 0 10px;
				background: rgba(131, 187, 244, .5);
				display: flex;
			}



		}

		.main {
			width: 100%;
			height: calc(100% - 15vh);
			overflow: auto;

			.uni-margin-wrap {
				width: 690rpx;
				width: 100%;
			}

			.swiper {
				height: 350rpx;
			}

			.swiper-item {
				display: block;
				height: 350rpx;
			}

			.grid {
				width: 100%;
				background: #fff;
				height: 170px;
				margin-top: 10px;

				.grid-item-box {
					flex: 1;
					// position: relative;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					// padding: 10px 0;
					margin: 15px 0;
					font-size: 14px;
				}
			}

			.title {
				width: 100%;
				font-size: 20px;
				font-weight: 530;
				margin-top: 20px;
				height: 25px;

				.gd {
					float: right;
					font-size: 14px;
					left: 0px;
					line-height: 30px;
					color: #544d4d;
				}

			}

			.list {
				width: 100%;
				height: 180px;
				margin: 10px auto;
				overflow: hidden;
				box-shadow: 0px 0px 5px 5px #f0f0f0;
				font-size: 14px;

				.qgtu {
					margin: auto;
					width: 90%;
					height: 100px;
					background: url('https://img2.baidu.com/it/u=3684963703,1305922693&fm=253&fmt=auto&app=138&f=PNG?w=1429&h=500');
					background-size: cover;
				}

				.item {
					display: flex;
					height: 24px;
					line-height: 25px;
					padding: 10px;

					.tap {
						width: 50px;
						height: 24px;
						background: linear-gradient(to right, rgb(251, 201, 211), rgb(253, 76, 76));
						text-align: center;
						color: #fff;
					}

					.wen {
						margin-left: 10px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}
			}

			.dl {
				width: 100%;
				display: flex;
				height: 120px;
				overflow: hidden;
				margin-top: 10px;
				background: #fcfcfc;
				padding: 10px;
				box-sizing: border-box;
				border-radius: 5px;

				.dd {
					margin-left: 10px;
					padding: 5px;
					line-height: 22px;
				}

				.dd-title {
					width: 5 0vw;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
				}

				.dd-introduce {
					font-size: 12px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.dd-price {
					font-size: 14px;
					color: rgb(255, 153, 0);
				}

				.dd-div {
					font-size: 14px;
				}

				.dd-div {
					display: inline-block;
					padding: 2px 10px;
					background: #f0f0f0;
					border-radius: 5px;
				}
			}

			.jjr {
				overflow-x: auto;
				width: 92%;
				display: flex;
				padding: 10px;

				.item {
					margin: 0 5px;
					width: 140px;
					box-shadow: 0 0 4px 4px #fcfcfc;
					height: 210px;
					text-align: center;
					border-radius: 10px;
					padding: 5px;

					line-height: 30px;

					.zx {
						color: #fff;
						border-radius: 20px;
						background: linear-gradient(to right, rgb(250, 99, 111), rgb(252, 167, 100));
					}
				}
			}

		}
	}
</style>